import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Upload, Modal, message } from 'antd';
import { PrimaryGhostC, InputC, ModalC, UploadC } from '../../../comps';
import { exportFile } from '@/src/utils/commonFunc';

const { confirm } = Modal;
const FormItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 12,
  },
};
@connect(({ initialSplitM, userM: user, loading }) => ({
  initialSplitM,
  user,
  loading,
}))
@Form.create()
export default class AddModal extends PureComponent {
  state = {
    fileList: [], //存放文件
    fileName: '', //文件名称
  };
  componentDidMount() {
    console.log(this.props.info);
  }

  //确认 请求后端新增系列产品
  confirmAddProduct = () => {
    const {
      dispatch,
      user: { currentUser },
      form: { getFieldsValue, validateFields },
    } = this.props;
    const { fileList } = this.state;
    var values;
    validateFields((err, fieldsValue) => {
      if (!err) {
        values = fieldsValue;
        let formData = new FormData();
        fileList.forEach((file) => {
          //上传文件 以表单形式传入
          formData.append('file', file);
        });
        formData.append('userId', currentUser.userId);
        if (values) {
          for (var i in values) {
            formData.append(i, values[i]);
          }
        }
        if (this.props.info?.seriesProductId) formData.append('seriesProductId', this.props.info?.seriesProductId);
        dispatch({
          type: 'initialSplitM/uploadFile',
          payload: {
            file: formData,
          },
          callback: (response) => {
            if (response) {
              if (response.code == 0) {
                message.success(this.props.info?.seriesProductId ? '编辑系列产品成功' : '新增系列产品成功'); //导入成功，后台返回新导入的系列产品的ID；
                // 导入成功 通知父组件更新系列产品id //前端重新获取系列产品下拉列表内容，并定位在新返回的系列产品上；
                this.props.onOk(response.data.dataSource);
              } else {
                var msg = response.msg ? response.msg : response.message || (this.props.info?.seriesProductId ? '新增系列产品失败' : '编辑系列产品失败');
                message.error(msg);
              }
            } else {
              message.error(this.props.info?.seriesProductId ? '编辑系列产品失败' : '新增系列产品失败');
            }
          },
        });
      }
    });
  };
  //新增产品的模态框关闭
  handleCancelAdd = () => {
    this.props.onCancel();
  };
  render() {
    const { loading, type, info = {} } = this.props;

    const modalProps = {
      visible: this.props.visible,
      confirmLoading: loading.effects['initialSplitM/uploadFile'] === true,
      onOk: () => {
        this.confirmAddProduct();
      },
      onCancel: () => {
        this.handleCancelAdd();
      },
      title: `${type == 1 ? '新增' : '编辑'}系列产品`,
      className: 'addSeries',
      height: 220, //内容区域的高度
      width: 650,
      maskClosable: false,
    };

    return (
      <ModalC {...modalProps}>
        <Row className={'rowBottom5'}>
          <Col span={12}>
            <InputC
              form={this.props.form} // form对象
              dataIndex={'listCode'}
              title={'系列产品代码'}
              formItemLayout={FormItemLayout}
              initialValue={info.listCode}
              rules={[
                {
                  required: true,
                  message: '系列产品代码必填',
                },
                { max: 64, message: '最长64个字符' },
              ]}
            />
          </Col>
          <Col span={12}>
            <InputC
              form={this.props.form} // form对象
              dataIndex={'listName'}
              title={'系列产品名称'}
              initialValue={info.listName}
              formItemLayout={FormItemLayout}
              rules={[
                { required: true, message: '系列产品名称必填' },
                { max: 64, message: '最长64个字符' },
              ]}
            />
          </Col>
        </Row>
        <Row className={'rowBottom5'}>
          <Col span={12}>
            <InputC
              form={this.props.form} // form对象
              dataIndex={'stockSH'}
              title={'上交所股东号码'}
              initialValue={info.stockSH}
              formItemLayout={FormItemLayout}
              rules={[
                { required: true, message: '上交所股东号码必填' },
                { max: 64, message: '最长64个字符' },
              ]}
            />
          </Col>
          <Col span={12}>
            <InputC
              form={this.props.form} // form对象
              dataIndex={'stockSZ'}
              title={'深交所股东号码'}
              initialValue={info.stockSZ}
              formItemLayout={FormItemLayout}
              rules={[
                { required: true, message: '深交所股东号码必填' },
                { max: 64, message: '最长64个字符' },
              ]}
            />
          </Col>
        </Row>
        <Row className={'rowBottom5'}>
          <Col span={12}>
            <InputC
              form={this.props.form} // form对象
              dataIndex={'seatSH'}
              title={'上交所席位号'}
              initialValue={info.seatSH}
              formItemLayout={FormItemLayout}
              rules={[
                { required: true, message: '上交所席位号必填' },
                { max: 64, message: '最长64个字符' },
              ]}
            />
          </Col>
          <Col span={12}>
            <InputC
              form={this.props.form} // form对象
              dataIndex={'seatSZ'}
              title={'深交所席位号'}
              initialValue={info.seatSZ}
              formItemLayout={FormItemLayout}
              rules={[
                { required: true, message: '深交所席位号必填' },
                { max: 64, message: '最长64个字符' },
              ]}
            />
          </Col>
        </Row>
        {this.props.type == 1 && (
          <Row>
            <Col>
              <UploadC
                title={'模版上传'}
                value={this.state.fileList?.map((x) => {
                  return { title: x.name, value: x };
                })}
                type={2}
                isDowm={false}
                disabled={this.props.type == 2 ? (info.confirmed == 0 ? false : true) : false}
                onUpload={(e) => {
                  this.setState({ fileList: [e] });
                }}
                remove={() => {
                  this.setState({ fileList: [] });
                }}
                primaryProps={{
                  helper: '文件名必须以yyyymmdd日期格式结尾,如:资产拆分20210101',
                }}
              />
              <div style={{ position: 'absolute', top: 0, left: ' 125px' }}>
                <PrimaryGhostC title={'模版下载'} onClick={() => exportFile('api/v1/assetssplit/excelimport/download', {})} />
              </div>
            </Col>
          </Row>
        )}
      </ModalC>
    );
  }
}
